<template>
    <view :class="$style.form">
        <view :class="$style.logo">
            <image :class="$style.img" mode="widthFix" src="@/static/logo.png" />
        </view>
        <uni-forms ref="formRef" :rules="rules" :modelValue="formData">
            <uni-forms-item label="账号" required name="username">
                <uni-easyinput v-model="formData.username" placeholder="请输入账号" />
            </uni-forms-item>
            <uni-forms-item label="密码" required name="password">
                <uni-easyinput v-model="formData.password" trim="both" type="password" placeholder="请输入密码"></uni-easyinput>
            </uni-forms-item>
        </uni-forms>
        <button type="primary" @click="submit">提交</button>
    </view>
</template>

<script lang="ts" setup>
    import { loginApi } from '@/api/Login';
import { useGlobalStore } from '@/stores';
import { ref } from 'vue';

    const prevAccountKey = 'prevAccount'
    let prevAccount = localStorage.getItem(prevAccountKey)


    var pages = getCurrentPages();
    var page = pages[pages.length - 1];
    const redirect = page.options.redirect

    const globalStore = useGlobalStore()

    const formRef = ref()

    const formData = ref({
        username : '',
        password : ''
    })

    if(prevAccount) {
        formData.value.username = prevAccount
    }

    const rules = ref({
        username : {
            rules: [{
                required: true,
                errorMessage: '请输入账号'
            }]
        },
        password : {
            rules: [{
                required: true,
                errorMessage: '请输入密码'
            }]
        }
    })

    function submit() {
        formRef.value.validate().then(data => {
            uni.showLoading()

            loginApi(data).then(r => {
                uni.hideLoading()
                if(r.success) {
                    uni.showToast({
                        title : '登录成功'
                    })

                    localStorage.setItem(prevAccountKey, formData.value.username)


                    let time = Date.now()

                    const data = r.data

                    globalStore.loginStatus = true
                    globalStore.accessToken = data.token
                    globalStore.accessExpireIn = time + data.expire * 1000

                    globalStore.role = data.role
                    globalStore.userInfo = data.info

                    globalStore.setCache({
                        accessToken : data.token,
                        accessExpireIn : globalStore.accessExpireIn,
                        role : data.role,
                        userInfo : data.info
                    })

                    uni.redirectTo({
                            url : "/"
                    })


                    // if(redirect) {
                    //     uni.redirectTo({
                    //         url : decodeURIComponent(redirect)
                    //     })
                    // }else {
                    //     uni.navigateBack()
                    // }

                }else {
                    uni.showModal({
                        content : r.msg
                    })
                }
            })
            
        }).catch(err => {
            console.log('err', err);
        })
    }
</script>

<style lang="scss" module>
    .form{
        padding: 0 $base-space;
        padding-top: 100rpx;

        .item{
            margin-top: 20rpx;
        }
    }


    .logo{
        width: 60%;
        margin: auto;
        margin-bottom: 100rpx;

        .img{
            display: block;
            width: 100%;
        }
    }
</style>